<template>
    <el-card>
      <!-- 添加面包屑组件 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/script_library">脚本库</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      
      <div class="header">
        <div>
          <el-button class="button" type="" @click="addTag">新建标签</el-button>
        </div>
        <el-input
          v-model="input"
          style="max-width: 600px"
          placeholder="请输入搜索内容..."
          class="input-with-select"
        />
      </div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="标签名"
            sortable
          />
          <el-table-column
            prop="description"
            label="描述"
          />
          <!-- <el-table-column
            prop="relatedJobCount"
            label="关联作业量"
          />
          <el-table-column
            prop="relatedScriptCount"
            label="关联脚本量"
          /> -->
          <el-table-column
            prop="modify_user"
            label="更新人"
          />
          <el-table-column
            prop="modify_time"
            label="更新时间"
          />
        </el-table>
        
      <el-dialog
          :title="dialogTitle"
          v-model="dialogVisible"
          :before-close="handleCloseDialog"
          :width="dialogWidth"
        >
          <AddTag 
            v-if="rwType === 'add_tag'" 
            @submit="handleSubmit" 
            @close="handleCloseDialog"
            :edit-data="editData"
          ></AddTag>
      </el-dialog>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted } from 'vue';
import { tagList } from '@/api/scriptLibrary';

const AddTag = defineAsyncComponent(() => import('./form/addTag.vue'));

const dialogVisible = ref(false);
const rwType = ref('add_tag');
const dialogTitle = ref('新建标签');
const dialogWidth = ref('50%');
const input = ref('');
const editData:any = ref(null);

// 模拟表格数据
const tableData = ref([]);

const handleCloseDialog = () => {
  dialogVisible.value = false;
  rwType.value = '';
  editData.value = null;
};

const addTag = () => {
  console.log('新建标签');
  dialogVisible.value = true;
  rwType.value = 'add_tag';
  dialogTitle.value = '新建标签';
  editData.value = null;
};

const handleSubmit = async () => {
  dialogVisible.value = false;
  rwType.value = '';
  dialogTitle.value = '';
  editData.value = null;
  // 这里可以添加刷新表格数据的逻辑
  getList()
};
const getList = async() => {
  const res = await tagList()
  console.log('[ res.data ] >', res.data)
  if(res.data.code === 200) {
    tableData.value = res.data.data    ;
  }
}
 
 onMounted(() => {
  getList();
 });
</script>

<style scoped  lang="scss">
.header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .inputSearch{
    width: 200px;
  };
}
/* 可添加面包屑样式 */
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>